<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <title>Project</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous" />
  <script src="https://kit.fontawesome.com/d4b10e8095.js" crossorigin="anonymous"></script>
  <style>
    @import url("https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap");

body {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow-y: scroll;
  font-family: "Fredoka One", monospace;
  background-image: url(http://surl.li/cmzmk);
  background-size: cover;
  color: rgb(173, 221, 221);
}

body::-webkit-scrollbar {
  display: none;
}

h1 {
  font-size: 5rem;
}

h3 {
  font-size: 2rem;
}

/* NavBar */
.nav-item {
  font-family: "Fredoka One";
  color: #6f7d8c;
  background: rgb(150, 163, 236, 20%);
  border: 1px solid rgb(150, 163, 236, 30%);
  border-radius: 0.5rem;
}

.nav-link,
i,
a {
  color: rgb(173, 221, 221);
}

/* Main */
.main {
  margin: 9.5% 6%;
  margin-bottom: 18%;
}

.social-icon {
  display: flex;
  align-items: left;
}

/* About */
#aboutme {
  margin-bottom: 16%;
}

.img{
  width: 23rem;
  height: 23rem;
}

/* Work */
#work {
  margin-top: 12%;
}

.card {
  background: rgb(150, 163, 236, 30%);
}

/* Contact */
#contact {
  margin-top: 9%;
}
  </style>
</head>

<body>
  <!-- NavBar -->
  <nav class="navbar navbar-expand-lg sticky-top">
    <div class="container-fluid">
      <div class="collapse navbar-collapse">
        <i class="fa-solid fa-user-secret fs-2 ms-3"></i>
        <ul class="navbar-nav ms-auto mt-3 fs-4">
          <li class="nav-item mx-2">
            <a class="nav-link px-3" href="#aboutme">About</a>
          </li>
          <li class="nav-item mx-2 px-3">
            <a class="nav-link" href="#work">Work</a>
          </li>
          <li class="nav-item mx-2 px-3">
            <a class="nav-link" href="#contact">Contact</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>

  <section class="main py-md-5">
    <div class="container-fluid">
      <div class="row">
        <div class="col-lg-6">
          <div class="main-content py-5 ms-5 mt-md-5">
            <h1>Hello! <span>I am </span><span id="name">Nikhil.</span></h1>
            <h3>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Totam
              dicta porro consequatur tempora ipsam.
            </h3>
            <div class="social-icon py-3">
              <a href="https://www.facebook.com/" target="_blank">
                <div class="d-inline-block pe-1">
                  <i class="fa-brands fa-facebook fs-3 mx-2"></i>
                </div>
              </a>
              <a href="https://github.com/nikgautamgithub">
                <div class="d-inline-block px-1">
                  <i class="fa-brands fa-github fs-3 mx-2"></i>
                </div>
              </a>
              <a href="https://www.instagram.com/nikgautamig/">
                <div class="d-inline-block px-1" style="border: none">
                  <i class="fa-brands fa-instagram fs-3 mx-2"></i>
                </div>
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="aboutme">
    <div class="container-fluid">
      <div class="row justify-content-center my-5 mx-5">
        <div class="col-lg-6 text-center w-50">
          <img class="img shadow"
            src="https://images.unsplash.com/photo-1635322966219-b75ed372eb01?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=764&q=80"
            alt="Photo" />
        </div>
        <div class="col-lg-6">
          <h1>About Me</h1>
          <h3>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque
            nostrum eum, iure pariatur ipsum quaerat, laboriosam eius a
            dolorum molestiae enim, fugit obcaecati exercitationem.
          </h3>
          <h3>
            Ipsum dolor sit amet consectetur adipisicing elit. Dignissimos,
            dolores quae fugit aliquid odit impedit. cum mollitia sunt tempora
            corporis. Lorem ipsum dolor sit amet consectetur adipisicing elit.
          </h3>
          <h3>
            Voluptate nobis, maiores impedit corrupti modi cupiditate libero.
            Rem culpa non placeat dolores quas sit sed maiores veritatis optio
            vero.
          </h3>
        </div>
      </div>
    </div>
  </section>

  <section id="work" class="py-5 my-5">
    <div class="container py-5 my-5 text-center">
      <h1>Some of my Work...</h1>
    </div>
    <div class="container text-center">
      <div class="card d-inline-block mx-4 shadow" style="width: 23rem">
        <img
          src=""
          class="card-img-top" alt="Project Photo" />
        <div class="card-body">
          <h5 class="card-title">Project title</h5>
          <p class="card-text">
            Some Quick summary about the project. Lorem ipsum dolor sit amet
          </p>
          <a href="#" class="btn btn-primary" target="_blank">Visit Project</a>
        </div>
      </div>
      <div class="card d-inline-block mx-4 shadow" style="width: 23rem">
        <img
          src=""
          class="card-img-top" alt="Project Photo" />
        <div class="card-body">
          <h5 class="card-title">Project title</h5>
          <p class="card-text">
            Some Quick summary about the project. Lorem ipsum dolor sit amet
          </p>
          <a href="#" class="btn btn-primary" target="_blank">Visit Project</a>
        </div>
      </div>
      <div class="card d-inline-block mx-4 shadow" style="width: 23rem">
        <img
          src=""
          class="card-img-top" alt="Project Photo" />
        <div class="card-body">
          <h5 class="card-title">Project title</h5>
          <p class="card-text">
            Some Quick summary about the project. Lorem ipsum dolor sit amet
          </p>
          <a href="#" class="btn btn-primary" target="_blank">Visit Project</a>
        </div>
      </div>
    </div>
  </section>

  <section id="contact">
    <div class="text-center">
      <h3 class="mt-5 pt-5" style="font-size: 3rem">
        Let's work together...
      </h3>
    </div>
    <div class="text-center" style="padding: 2%; font-size: 1.5rem">
      <a href="https://github.com/nikgautamgithub" target="_blank" class="text-decoration-none mx-3"><i
          class="fa-brands fa-github fs-3 mx-1"></i>Github</a>

      <a href="https://www.linkedin.com/in/nikhilgautam02/" target="_blank" class="text-decoration-none mx-3"><i
          class="fa-brands fa-linkedin fs-3 mx-1"></i>Linkedin</a>

      <a href="https://mobile.twitter.com/nikgautamtweets" target="_blank" class="text-decoration-none mx-3"><i
          class="fa-brands fa-twitter fs-3 mx-1"></i>Twitter</a>

      <a href="example@gmail.com" target="_blank" class="text-decoration-none mx-3"><i
          class="fa-solid fa-envelope fs-3 mx-1"></i>Send a mail</a>

      <a href="123456789" target="_blank" class="text-decoration-none mx-3"><i
          class="fa-solid fa-phone fs-3 mx-1"></i>Contact me</a>
    </div>
  </section>

  <footer class="pb-1">
    <div class="text-center m-0">
      <p class="m-0">**This is an illustration of a personal portfolio.</p>
      <p class="fw-semibold m-0">Created for Bootstrap Project</p>
      <p class="m-0">
        <a href="https://codepen.io/nikgautamcodepen" class="text-decoration-none bg-gradient">By Nikhil Gautam</a>
      </p>
    </div>
  </footer>

  <script>
    var click = document.getElementById("name");
    click.style.transition = "all 3s";
    setInterval(function () {
      var randomColor = Math.floor(Math.random() * 16777215).toString(16);
      click.style.color = "#" + randomColor;
    }, 3000);
  </script>
  <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js"
    integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.min.js"
    integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK"
    crossorigin="anonymous"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa"
    crossorigin="anonymous"></script>
</body>

</html>
